<template>
  <div id="app">
    <!-- Container容器 -->
    <el-container>
      <!-- 头1 -->
      <el-header>
        <i
          :style="{
            backgroundImage: is
              ? 'url(http://css.mafengwo.net/images/mdd/place/mfw-logo-white-small3.png)'
              : '',
          }"
        ></i>
        <MyNav></MyNav>
        <div class="headers">
          <a href=""></a>
          <a href=""></a>
          <a href=""></a>
          <a href="">登录</a>
          <el-divider direction="vertical"></el-divider>
          <a href="">注册</a>
        </div>
      </el-header>
      <router-view></router-view>
      <el-footer height="600px" style="padding: 0">
        <footer-bar-vue />
      </el-footer>

      <!-- 图片 -->

      <!-- 尾部 -->
    </el-container>
    <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
    <!-- <router-view/> -->

    <el-backtop :visibility-height="800" :bottom="100" :right="120"></el-backtop>
  </div>
</template>
<script>
import MyNav from "components/nav/nav.vue";
import footerBarVue from "./components/footer/footerBar.vue";
export default {
  data() {
    return {
      is: false,
    };
  },
  components: {
    MyNav,
    footerBarVue,
  },
  created() {},
  methods: {
    setHeaderSty() {
      console.log("xiaoye-设置头部app=>>>>>>>>");
      this.is = true;
    },
  },
  watch: {
    $route: {
      deep: true,
      handler(val) {
        val.path == "/mdd" ? this.setHeaderSty() : (this.is = false);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  & > i {
    width: 200px;
    height: 70px;
    background-image: url("https://css.mafengwo.net/images/header-small-sprites3.png");
    background-size: 61%;
    background-position: 8px -15px;
    background-repeat: no-repeat;
    margin-top: 6px;
  }
}
.headers {
  height: 58px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 245px;
  font-size: 14px;

  a {
    color: #ff9e00;
    &:hover {
      text-decoration: underline;
    }
  }
  a:nth-child(-n + 3) {
    padding: 13px;
    margin: 0 5px;
    background-image: url("~@/assets/images/header-sprites13.png");
    background-size: 200px;
  }
  a:nth-child(1) {
    background-position-y: -50px;
    &:hover {
      background-position-y: -80px;
    }
  }
  a:nth-child(2) {
    background-position: -30px -50px;
    &:hover {
      background-position-y: -80px;
    }
  }
  a:nth-child(3) {
    background-position-y: 35px;
    margin-right: 10px;
    &:hover {
      background-position-x: -30px;
    }
  }
}
.el-header {
  display: flex;
  justify-content: center;
}
.el-footer {
  padding: 0;
}
.el-main {
  text-align: center;
}
#main-img {
  height: 450px;
  background-color: bisque;
}
#main-col {
}
#main-nav {
  height: 60px;
  margin: 0;
  padding-left: 0;
  margin-bottom: 10px;
}
#main-left {
}
#main-rigth {
}
#app-logo {
  margin-top: 8px;
}
/deep/.el-header {
  background-color: rgba(255, 0, 0, 0);
}
/deep/ .el-backtop {
  color: #ff9d00;
}
/deep/ .el-backtop:hover {
  background-color: #fff9ef;
}
</style>
